<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">主管监评</div>
      <div class="select">
        <el-select v-model="selectItem" placeholder="请选择期次或年度">
          <el-option
            v-for="item in periodList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="sn-body">
        <div class="wrap-container">
          <div v-for="(item, index) in list" :key="index">
            <el-progress
              type="circle"
              :percentage="item.score"
              :color="colors"
              :text-color="'#fff'"
              :stroke-width="14"
              :format="setItemText(item.score)"
            ></el-progress>
            <div style="text-align: center; color: #fff; font-size: 15px">
              {{ item.subject }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "supervisoryEval",
  components: {},
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      list: [],
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      subjectNameList: [],
      periodList: [],
      selectItem: "",
      num: 0,
      timer: null,
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: true,
    },
    selectItem: {
      handler(val) {
        if (val) {
          this.list = this.chartData.find((el) => el.period === val).data;
        }
      },
      deep: true,
    },
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      const list = this.allData.filter((el) => el.scoreType === "4");
      if (list.length > 0) {
        this.chartData = list.map((el) => {
          const obj = { data: [] };
          const list = el.subjectName.map((v, key) => {
            return {
              subject: v,
              score: Number(el.score[key]),
            };
          });
          obj.period = el.period;
          obj.data = list;
          return obj;
        });
        this.list = this.chartData[0].data;
        this.periodList = list.map((el) => el.period);
        this.selectItem = list[0].period;
        this.num = 0;
        this.timer = setInterval(() => {
          this.switchItem();
        }, 2000);
      } else {
        this.chartData = []
        this.list = [];
        clearInterval(this.timer);
      }
    },
    switchItem() {
      this.num += 1;
      if (this.num > this.chartData.length - 1) {
        this.num = 0;
      }
      const item = this.chartData[this.num].data;
      this.selectItem = this.chartData[this.num].period;
      this.list = item;
    },
    setItemText(p) {
      return () => {
        return p + "分";
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 1370px;
  top: 380px;
  height: 260px;
  %table-style {
    width: 100%;
    height: 35px;
    table-layout: fixed;
    tr {
      td {
        padding: 10px 5px;
        text-align: center;
        background-color: transparent;
        white-space: nowrap;
        overflow: hidden;
        color: #e2e5ff;
        font-size: 14px;
      }
    }
  }
}

.wrap-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.select {
  position: absolute;
  right: 0;
}
</style>
